<template>
  <div class="register-index">
    <div class="content">
      <h1 class="title-1">注册新用户</h1>

      <div class="form">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="手机号:" prop="phone">
            <el-input type="text" v-model="form.phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>

          <el-form-item label="验证码:" prop="code">
            <el-input type="text" v-model="form.code" placeholder="请输入验证码">
              <template v-slot:prepend>
                <el-button type="button" @click="handleCode">点击获取验证码</el-button>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="密码:" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入登录密码" show-password></el-input>
          </el-form-item>

          <el-form-item label="确认密码:" prop="rePassword">
            <el-input type="password" v-model="form.rePassword" placeholder="请再次输入登录密码" show-password></el-input>
          </el-form-item>

          <el-form-item label="协议:" prop="agree">
            <el-checkbox v-model="form.agree">我已阅读并同意注册<a href="#">《用户协议》</a></el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button class="btn-submit" type="primary" @click="handleRegister" size="large">确认注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getCode, getRegister } from '@/api/api';
export default {
  name: "RegisterIndex",
  data() {
    return {
      form: {
        phone: "",
        code: "",
        password: "",
        rePassword: "",
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号!!!", trigger: "blur" },
          { pattern: /^[1]([3-9])[0-9]{9}$/, message: "请输入正确的手机号", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入验证码!!!", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码!!!", trigger: "blur" },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/, min: 6, max: 21, message: "密码必须为6-21位字母、数字或下划线", trigger: "blur" },
        ],
        rePassword: [
          { required: true, message: "请再次输入登录密码!!!", trigger: "blur" },
          { message: "两次输入密码不一致", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            }
          }
        ],
        agree: [
          { required: true, message: "请阅读并同意用户协议!!!", trigger: "change" },
        ],
      },
    };
  },

  methods: {

    //异步请求验证码
    async handleCode() {
      if (!this.form.phone) {
        this.$message.warning("请先输入手机号");
        return;
      }
      // 在这里增加手机号码格式验证
      const phonePattern = /^[1]([3-9])[0-9]{9}$/; // 简单的手机号格式验证
      if (!phonePattern.test(this.form.phone)) {
        this.$message.warning("请输入正确的手机号");
        return;
      }
      if (this.form.code) {
        this.$message.warning("验证码已发送，请勿重复点击");
        return;
      }
      try {
        const { code, message, data } = await getCode(this.form.phone); // 异步获取验证码
        if (code === 200) {
          this.form.code = data; // 假设 data 是验证码
          this.$message.success("验证码发送成功");
        } else {
          this.$message.error(`验证码发送失败: ${message}`);
        }
      } catch (error) {
        this.$message.error("验证码请求出错，请稍后再试");
      }
    },

    async handleRegister() {
      try {
        await this.$refs.form.validate(); // 表单校验
        const { phone, password, code } = this.form;  // 获取表单数据
        const { code: c1, message } = await getRegister(phone, password, code); // 异步注册请求
        if (c1 === 200) {
          this.$message.success("注册成功");
          this.$router.push("/login");
        } else {
          this.$message.error(`注册失败: ${message}`);
        }
      } catch (error) {
        this.$message.warning("请检查输入是否正确");
      }
    }
  },
}

</script>

<style scoped>
.register-index {
  width: 100%;
  height: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1200px;
  /* height: 100%; */
  margin: 0px auto;
  border: 1px solid #dfdfdf;
}

.title-1 {
  width: 100%;
  text-align: center;
  font-size: 26px;
  padding: 10px 0px;
  background-color: #dfdfdf;
  border-radius: 5px;
}

.form {
  width: 400px;
  margin: 50px auto;
}

.btn-submit {
  width: 100%;
  margin-top: 10px;
  background-color: #ea4a36;
  border: none;
  font-size: 18px;
  color: #fff;
}
</style>